<template>
	<view class="class_main">
		<view class="top">
			<view class="slideshow_img">
				<swiper indicator-active-color="#157658">
					<block>
						<swiper-item style="width:100%;height: 360rpx;">
							<image style="width:100%;" src='@/static/c1.png'></image>
						</swiper-item>
						<swiper-item style="width:100%;height: 360rpx;">
							<image style="width:100%;" src='@/static/c2.png'></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view class="search_input" >
				输入框:<input />
			</view>
		</view>
		<scroll-view>
			<view class='productNav'>
				<view class='left'>
					<view :class="posi == 'id'+index ?'selected':'normal'" @tap='switchNav("id"+index, index)'
						v-for="(item, index) in dataList" :key="index">{{item.name}}
					</view>
				</view>
				<view class='right'>
					<scroll-view scroll-y="true" class="scroll" @scroll="scroll" :scroll-into-view="posi"
						:scroll-top="scrollTop">
						<view :id="item.id" v-for="(item, index) in dataList" :key="index">
							<view class="title">{{item.name}}</view>
							<view v-for="(subitem, i) in item.num" :key="i">{{item.name}}{{subitem}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				posi: '',
				scrollTop: 0,
				data: ['为您推荐', '电脑', '手机', '美妆', '为您推荐', '电脑', '手机', '美妆', '为您推荐', '电脑', '手机', '美妆'], //模拟数据
				dataList: [], //循环数据
				dataEleHeight: [], //获取data数组中各个元素的高度
				topList: [], //计算得到各个元素与顶部的距离
				scrollHeight: 500, //滚动区域的高度
				flag: true //判断左侧是否做高亮显示判断
			}
		},
		onLoad() {
			//初始化数据，相当于请求数据
			for (let i = 0; i < this.data.length; i++) {
				let rand = parseInt(Math.random() * 100, 10);
				let num = []
				for (let j = 0; j < rand; j++) {
					num.push(j);
				}
				let obj = {
					id: 'id' + i,
					name: this.data[i],
					num: num
				}
				if (i == 0) {
					this.posi = obj.id
				}
				this.dataList.push(obj)
			}
			console.log(this.dataList);
		},
		watch: {
			dataEleHeight(val) {
				if (val.length == this.dataList.length) {
					//判断是第几个元素，高度设置为之前的元素高度之和
					let top = 0
					for (let i in this.dataEleHeight) {
						if (i >= 0 && i < this.dataEleHeight.length) {
							if (i != 0) {
								top += this.dataEleHeight[i - 1].height
							}
							this.topList.push(top);
						}
					}
				}
				console.log(this.topList)
			}
		},
		mounted() {
			let that = this
			for (let i = 0; i < this.dataList.length; i++) {
				//获取元素属性最好是在渲染之后执行，避免获取空值
				uni.createSelectorQuery().in(this).select('#' + this.dataList[i].id).boundingClientRect(function(rect) {
					let obj = {
						id: that.dataList[i].id,
						height: rect.height
					}
					that.dataEleHeight.push(obj);
				}).exec();
			}
		},
		methods: {
			scroll(e) {
				console.log(e);
				let index = this.posi.substring(2)
				//如果点击了左侧分类,则不做左侧高亮显示判断
				// if (this.flag) {
				// 	for (let i in this.topList) {
				// 		if (i < this.topList.length - 1 && this.topList[i] <= e.detail.scrollTop && e.detail.scrollTop <
				// 			this.topList[parseInt(i) + 1]) {
				// 			this.posi = this.dataList[i].id
				// 			break;
				// 		}
				// 		this.posi = this.dataList[i].id
				// 	}
				// }
				// this.flag = true
				this.scrollTop = e.detail.scrollTop //解决重复点击菜单时右侧数据不变的问题
			},
			switchNav: function(e, index) {
				this.flag = false
				if (this.posi != e) {
					this.posi = e
				} else {
					//重复点击一样要定位到最开头的位置
					this.scrollTop = this.topList[index];
				}
			}
		}
	}
</script>

<style lang="less" scoped>

	.class_main {
		.top{
			background-color: #f2f2f2;
			.slideshow_img{
				border: 1rpx solid red;
				background-color: #ffffff;
			}
			.search_input{
				
				margin-top: 20rpx;
				border: 1rpx solid red;
				background-color: #ffffff;
				display: flex;
				justify-content: center;
				border-radius: 5rem;
				padding: 15rpx; 
			}
		}
		.productNav {
			border: 1rpx solid red;
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			font-family: "Microsoft YaHei"
		}

		.left {
			width: 25%;
			font-size: 30rpx;
			background-color: #f4f4f4;
		}

		.left view {
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
		}

		.selected {
			background-color: #fff;
			border-left: 2px solid #E54847;
			font-weight: bold;
			color: #E54847;
		}

		.normal {
			background-color: #f4f4f4;
			border-bottom: 1px solid #f2f2f2;
		}

		.right {
			width: 75%;
			margin: 0;
		}

		.scroll {
			height: 500px;
			text-align: center;
		}

		.title {
			background: #E54847;
			color: white;
		}
	}
</style>